<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Exercise 案例练习</title>

  <style>
      * {
          margin: 0;
          padding: 0;
      }

      body {
          background-color: #f5f5f5;
      }

      .box {
          width: 260px;
          height: 425px;
          background-color: #fff;
          /* 让块级元素居中对齐 */
          margin: 100px auto;
      }
      a {
          color: #333;
          text-decoration: none;
      }
      .box img {
          width: 100%;
          height: 55%;
      }

      .review {
          height: 70px;
          font-size: 14px;
          padding: 0 28px;
          margin-top: 30px;
      }

      .appraise {
          font-size: 12px;
          color: #b0b0b0;
          margin-top: 20px;
          padding: 0 28px;
      }

      .info {
          font-size: 14px;
          margin-top: 15px;
          padding: 0 28px;
      }

      .info h4 {
          display: inline-block;
          font-weight: 400;
      }

      .info span {
          color: #ff6700;
      }

      .info em{
          font-style: normal;
          color: #ebe4e0;
          margin: 0 2px 0 2px;
      }
  </style>

</head>
<body>
<div class="box">
  <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=400&h=400&f=webp&q=90"
      alt="img">
  <p class="review">快递牛，整体不错蓝牙可以秒连，小米广告多，垃圾</p>
  <div class="appraise">来自于 华为用户 的评价</div>
  <div class="info">
    <h4><a href="#">Redmi 人工智障蓝... </a></h4>
    <em>|</em>
    <span>299.9元</span>
  </div>
</div>
</body>
</html>